<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul li{
				margin-top: 10px;
				/* 1、给盒子设置宽度*/
				width: 300px;
				/* 2、强制显示为一行*/
				white-space: nowrap;
				/* 3、超出部分隐藏*/
				overflow: hidden;
				/* 4、文本溢出属性*/
				text-overflow: ellipsis;
			}
			ul li a{
				text-decoration: none;
				color: black;
			}
		</style>
	</head>
	
	<body>
		<!-- 
		 文本溢出属性
		 text-overflow: 
		 clip:剪掉
		 ellipsis:省略;
		 注意点：
		 ellipsis需要搭配overflow:hidden与white-space: nowrap同时使用。
		 -->
		<ul>
			<li> <a href="#">广东今年春运情况广东今年春运情况广东春运情况</a> </li>
			<li> <a href="#">广广东今年春运情况广东今年春运情况广东今年春运情况</a> </li>
			<li> <a href="#">广东今年春运情况广东今年春情况广东今年春运情况</a> </li>
			<li> <a href="#">广东今年春运情况广东今年春运情况广东今年春运情况广东今年春运情况</a> </li>
			<li> <a href="#">广东今年春运情况广东今年春运情况广东今年春运情况广东今年春运情况</a> </li>
		</ul>
	</body>
</html>
